<template>
	<el-config-provider :locale="locale" :size="config.size" :zIndex="config.zIndex" :button="config.button">
		<router-view></router-view>
	</el-config-provider>
</template>

<script setup>
	import colorTool from '@/utils/color'
	import Config from "./config"
	import tool from './utils/tool'
	import {ref, onMounted/*, h*/} from 'vue';
	import el_zh_cn from 'element-plus/lib/locale/lang/zh-cn'
	import { useGlobal } from './global';
	// import {ElNotification} from "element-plus";
	import globalWS from './ws';
	import api from './api'
	import Notify from './views/doctor/notify'

	const config = ref({
		size: 'default',
		zIndex: 2000,
		button: {
			autoInsertSpace: false
		}
	})
	const locale = el_zh_cn
	let pingIntr;

	const localSocket = () => {
		let domain = (new URL(process.env.VUE_APP_API_BASEURL)).hostname;
		let is_production = process.env.NODE_ENV === 'production';
		let ws_api = `wss://${is_production ? domain : 'healthweb.ezhangxiu.cn'}/wss`;
		console.log('ws_api:', ws_api);
		let ws = new WebSocket(ws_api);
		ws.onopen = () => {
			startPing();
		};
		ws.onmessage = (e) => {
			let data = JSON.parse(e.data),
				client_id = data.client_id || '';
			if (e.data && data.type !== 'pong') {
				console.log('app msg', e.data);
			}
			if (data.type === 'init') {
				console.log('init client:', client_id);
				setOnline(client_id);
			} else if (data.type === 'notice_back') {
				if (location.href.indexOf('doctor/bench') === -1) {
					showNotify();
					/*ElNotification({
						title: '提示',
						message: h('b', {style: 'color: black'}, '已为您分配问诊单，请及时接诊'),
					});*/
				}
			}
		};
		ws.onclose = () => {
		};
		ws.onerror = () => {
		};
		globalWS.setWs(ws);
	}

	const showNotify = () => {
		console.log('nnnnnnnnnnnnnnnnnnnnotify');
		const notify = new Notify({
			// message: "There is message.", // page title.
			effect: "scrolling",
			// openurl: "https://github.com/jaywcjlove/iNotify",
			onclick: () => {
				this.$router.push('doctor/bench');
				notify.close();
			},
			audio: {
				file: 'msg.mp4',
			},
			interval: 1000,
			notification: {
				title: "提示", // Set notification title
				icon: "", // Set notification icon, The default is Favicon
				body: "已为您分配问诊单，请及时接诊", // Set message content
			},
		});
		notify.player();
		notify.setTitle('【新消息】');
		notify.notify({
			title: "提示",
			body: "已为您分配问诊单，请及时接诊",
			onclick: function () {
				this.$router.push('doctor/bench');
				console.log("on click");
			},
			onshow: function () {
				console.log("on show");
			},
		});
		setTimeout(() => {
			if (notify) notify.close();
		}, 3000);
	}

	onMounted(() => {
		//设置主题颜色
		const app_color = Config.COLOR || tool.data.get('APP_COLOR')
		if(app_color){
			document.documentElement.style.setProperty('--el-color-primary', app_color);
			for (let i = 1; i <= 9; i++) {
				document.documentElement.style.setProperty(`--el-color-primary-light-${i}`, colorTool.lighten(app_color,i/10));
			}
			for (let i = 1; i <= 9; i++) {
				document.documentElement.style.setProperty(`--el-color-primary-dark-${i}`, colorTool.darken(app_color,i/10));
			}
		}

		let global = useGlobal();
		global.name = "halo";
		localSocket();
	});

	const startPing = () => {
		if (pingIntr) {
			clearInterval(pingIntr);
		}
		pingIntr = setInterval(() => {
			if (globalWS.ws.bufferedAmount === 0) {
				globalWS.ws.send(JSON.stringify({ mode: 'ping' }));
			}
		}, 1000);
	}

	const setOnline = (client_id) => {
		api['doctor.bench'].status.post({type: 'online', client_id, tag: 'notice'}).then((res) => {
			console.log('Res:online', res);
			if (res.code !== 0) {
				this.$alert('setOnline:' + res.message, "提示", {type: 'error'});
			}
		}).catch((msg) => {
			this.$alert(msg, "提示", {type: 'error'})
		})
	};
</script>

<style lang="scss">
	@import '@/style/style.scss';
</style>
